<template>
<div class="screen-container">
  <h3>TESTIMONAL</h3>
  <h4>Our CLients Say!</h4>
  <div class="clients-list">
    <el-card class="client-box" v-for="(item, index) in data">
      <div class="face-box">
        <div class="image-box">
          <img :src="`/static/picture/testimonial-${ index + 1}.jpg`" alt="">
        </div>
        <div class="text-box">
          <h5>Client Name</h5>
          <p>Profession</p>
        </div>
      </div>
      <p>Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit. Aliqu diam amet diam et eos. Clita erat ipsum et lorem et sit.</p>
    </el-card>
  </div>
</div>
</template>

<script setup>
import { reactive } from 'vue'

const data = reactive(['', '', ''])
</script>

<style lang="scss" scoped>
$base-color: #ff3e41;
.screen-container {
  width: 1200px;
  margin: 0 auto;

  h3 {
    color: #51CFED;
  }
  
  h4 {
    padding: 17px 0;
    padding-bottom: 24px;
    font-size: 36px;
  }

  .clients-list {
    text-align: left;
    display: flex;

    .client-box {
      margin: 0 17px;
    }

    .face-box {
      margin-bottom: 24px;
      display: flex;

      .text-box {
        display: flex;
        flex-direction: column;
        justify-content: end;
        margin-left: 17px;

        h5 {
          font-size: 18px;
          margin-bottom: 18px;
        }
      }

    }

    p {
      color: gray;
    }
  }
}
</style>
